<template>
    <div class="main">
        <div class="model_box"></div>
        <div class="form_content">
            <NSpin :show="spinShow">
                <div class="content_box">
                    <span class="dayText">{{ birthdayInfo.birthday?.split('-')[1] }}月{{ birthdayInfo.birthday?.split('-')[2]
                    }}日
                    </span>
                    <div class="avter">
                        <img round :src="birthdayInfo.headSculpture"
                            style="width: 100px;height: 100px;border-radius: 50%;" />
                        <span style="margin-left: 15px;">{{ birthdayInfo.userName }}</span>
                    </div>
                    <span class="birthText">祝您生日快乐</span>
                    <NButton type="primary" class="btn" round @click="birthdayVisible = true">查看祝福</NButton>
                    <NButton type="primary" ghost class="btn" round style="border: 1px solid #006600;color: #006600;"
                        @click="goBack">暂时跳过
                    </NButton>
                </div>
            </NSpin>
        </div>
    </div>

    <NModal :auto-focus="false" v-model:show="birthdayVisible" preset="dialog" title="">
        <template #icon>
            <span></span>
        </template>
        <ModalCard @close="birthdayVisible = false">
            <div style="font-size: 15px;">共收到{{ birthdayInfo.birthdayBlessingList?.length }}条祝福</div>
            <NScrollbar>
                <div class="birthdayBox">
                    <div class="item_box" v-for="(item, index) in birthdayInfo.birthdayBlessingList" :key="index">
                        <div style="display: flex;align-items: center;padding:10px 0;width:auto">
                            <img round :src="item.headSculpture" style="width: 30px;height: 30px;border-radius: 50%;" />
                            <span style="margin-left: 5px;">{{ item.senderName }}</span>
                            <span style="margin-left: 5px;color: #9c9999;">{{ item.createTime }}</span>
                        </div>
                        <span style="width:100px;display:flex;justify-content: flex-end;">
                            <NEllipsis>
                                {{ item.blessing || '生日快乐' }}
                            </NEllipsis>
                        </span>
                    </div>
                </div>
            </NScrollbar>
        </ModalCard>
    </NModal>
</template>

<script setup lang="ts">
import { NButton, NSpin, NImage, NModal, NScrollbar, NEllipsis } from 'naive-ui'
import router from '@/router'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
import { useTagStore } from '@/stores/layout'
import { sendRequest } from '@/utils/api'
import ModalCard from '@/components/ModalCard.vue'

const tags = useTagStore().tags
const route = useRoute()
const birthdayVisible = ref(false)

// 返回
const goBack = () => {
    const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)

    tags.splice(index, 1)
    if (tags.length == 0) {
        router.push({ path: '/OA/Workbench/UserDesktop' })
    } else history.back()
}
// 获取详情
const spinShow = ref(false)
const birthdayInfo = ref<any>({})
const getBirthdayInfo = async () => {
    spinShow.value = true
    const [error, res] = await sendRequest({
        module: 'office',
        api: 'getBirthdayInfo',
        uri: {
            id: route.query.id as never
        }
    })
    if (error) return
    if (res.code !== 0) return
    birthdayInfo.value = res.data
    spinShow.value = false
}

watch(
    () => route,
    () => {
        if (route.path == '/OA/UserCenter/BirthdayInfo' && route.query.id) getBirthdayInfo()
    },
    { deep: true, immediate: true }
)
</script>

<style scoped lang="scss">
@mixin CommonFont {
    font-size: 18rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
}

.main {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .form_content {
        width: 100%;
        height: 100%;
        background-image: url('@/assets/images/newt2.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: 0 0;

        .content_box {
            display: flex;
            flex-direction: column;
            width: 400px;
            height: 100%;
            padding: 40px;
            z-index: 1999;
            color: black;

            .dayText {
                font-size: 30px;
            }

            .avter {
                display: flex;
                align-items: center;
                width: 100%;
                height: auto;
                font-size: 30px;

            }

            .birthText {
                font-size: 40px;
                color: #996600;
                font-weight: 700;
                margin: 10px 0;
            }

            .btn {
                display: flex;
                justify-content: center;
                width: 120px;
                height: 40px;
                font-size: 20px;
                margin-bottom: 20px;
            }
        }
    }
}

.birthdayBox {
    width: 100%;
    height: 400rem;
    display: flex;
    flex-direction: column;
    font-size: 14px;

    .item_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;
        background-color: #fff;
        padding: 0 10px;
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }
}

:deep(.n-spin-container) {
    width: 100%;
    height: 100%;
}

:deep(.n-spin-content) {
    width: 100%;
    height: 100%;
}
</style>